<template>
  <view :data-theme="globPrimary">
    <u-navbar title="砍价详情" :custom-back="back"></u-navbar>
    <view class="bargain-wrap" v-if="!$u.test.empty(bargainData)">
      <view class="course">
        <courseImage
          width="296"
          height="164"
          :image="bargainData.product_cover"
          :courseType="bargainData.product_type"
          :courseTypeText="bargainData.product_type_text"
          :promotionType="3"
          :promotionTypeText="bargainData.type_text"
        ></courseImage>
        <view class="content">
          <view class="u-line-2 title">{{ bargainData.product_title }}</view>
          <view class="price">
            <view class="selling">{{ bargainData.price | formatCurrency }}</view>
            <view class="original">{{ bargainData.product_price | formatCurrency }}</view>
          </view>
        </view>
      </view>
      <view class="bargain-view">
        <template v-if="isBargainUserid">
          <view class="promotion-wrap">
            <template v-if="promo_type == false">
              <view class="text" v-if="bargainData.bargain_finished != 1">
                已邀请
                <text>{{ bargainData.bargained_nums }}</text>
                名好友，再邀请
                <text>{{ bargainData.remain_nums }}</text>
                名即可砍价成功
              </view>
              <view class="text" v-else>恭喜您，砍价成功</view>
              <view class="number">
                <u-count-down
                  :timestamp="bargainData.end_countdown"
                  height="36"
                  separator-size="20"
                  separator-color="#FF6B25"
                  font-size="20"
                  color="#FF6B25"
                  separator="zh"
                  :show-days="true"
                  :show-hours="false"
                  :show-minutes="false"
                  :show-seconds="false"
                  :hide-zero-day="true"
                  class="count-down-days"
                  @end="changeStatus"
                ></u-count-down>
                <u-count-down
                  :timestamp="bargainData.end_countdown"
                  height="36"
                  bg-color="#FF6B25"
                  separator-size="20"
                  separator-color="#FF6B25"
                  font-size="20"
                  color="#ffffff"
                  :hide-zero-day="true"
                  class="count-down"
                  @end="changeStatus"
                ></u-count-down>
              </view>
            </template>
            <template v-else>
              <view class="text" style="font-weight: bold">活动已结束</view>
            </template>
          </view>
        </template>

        <template v-else>
          <view class="promotion-wrap" v-if="bargainData.running_status == 1">
            <template v-if="bargainData.bargain_finished == 1">
              <view class="promotion-wrap"><view class="text">砍价已结束</view></view>
            </template>
            <template v-else>
              <template v-if="bargainData.end_countdown == 0">
                <view class="promotion-wrap"><view class="text">砍价已结束</view></view>
              </template>
              <template v-else>
                <view class="text" v-if="bargainData.current_bargain_count == 0"
                  >帮我砍一刀吧～</view
                >
                <view class="text" v-else>
                  谢谢您，成功砍价
                  <text>{{ bargainData.current_bargain_price | formatCurrency('元') }}</text>
                </view>
                <view class="number">
                  <u-count-down
                    :timestamp="bargainData.end_countdown"
                    height="36"
                    separator-size="20"
                    separator-color="#FF6B25"
                    font-size="20"
                    color="#FF6B25"
                    separator="zh"
                    :show-days="true"
                    :show-hours="false"
                    :show-minutes="false"
                    :show-seconds="false"
                    :hide-zero-day="true"
                    class="count-down-days"
                    @end="changeStatus"
                  ></u-count-down>
                  <u-count-down
                    :timestamp="bargainData.end_countdown"
                    height="36"
                    bg-color="#FF6B25"
                    separator-size="20"
                    separator-color="#FF6B25"
                    font-size="20"
                    color="#ffffff"
                    :hide-zero-day="true"
                    class="count-down"
                    @end="changeStatus"
                  ></u-count-down>
                </view>
              </template>
            </template>
          </view>
          <view class="promotion-wrap" v-else><view class="text">砍价已结束</view></view>
        </template>
        <view class="ongoing">
          <view class="u-rela">
            <view class="progress"><view class="active" :style="[progressStyle]"></view></view>
            <u-image
              class="progress-img"
              width="56rpx"
              height="48rpx"
              src="@/pageCourse/static/images/kanjia_details_coin.png"
            ></u-image>
          </view>
          <view class="price">已砍{{ bargainData.bargained_total_price | formatCurrency }}</view>
        </view>
        <template v-if="isBargainUserid">
          <template v-if="promo_type == false">
            <view
              class="invite-btn"
              v-if="bargainData.bargain_finished !== 1"
              @click="inviteBargain"
              >邀请好友砍价</view
            >
            <view class="invite-btn" @click="toPay" v-else>去支付</view>
          </template>
        </template>
        <template v-else>
          <template v-if="bargainData.bargain_finished == 1">
            <view class="invite-btn" @click="returnDetail">我也想要</view>
          </template>
          <template v-else>
            <template v-if="bargainData.end_countdown == 0">
              <view class="invite-btn" @click="returnDetail">我也想要</view>
            </template>
            <template v-else>
              <view
                class="invite-btn"
                @click="handleBargainDoit"
                v-if="bargainData.current_bargain_count == 0"
                >帮TA砍一刀</view
              >
              <view class="invite-btn" v-else @click="returnDetail">我也想要</view>
            </template>
          </template>
        </template>
        <view class="ranking">
          <view class="title">
            <u-image
              width="212rpx"
              height="32rpx"
              src="@/pageCourse/static/images/kanjia_list.png"
            ></u-image>
          </view>
          <view class="list">
            <view class="item" v-for="(item, index) in bargainData.bargain_data" :key="index">
              <u-avatar size="88" :src="item.current_user_avatar_url"></u-avatar>
              <view class="center">
                <view class="name u-line-1">{{ item.current_user_name | filname }}</view>
                <view class="time">{{ item.create_time | filltime }}</view>
              </view>
              <view class="price">砍掉{{ item.current_bargain_price | formatCurrency('元') }}</view>
            </view>
            <edu-empty v-if="$u.test.empty(bargainData.bargain_data)"></edu-empty>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  data() {
    return {
      bargainData: {},
      options: {},
      promo_type: false,
      share_code: '',
    }
  },
  onLoad(options) {
    if (options.hasOwnProperty('share_code')) {
      this.share_code = options.share_code
      this.$store.commit('projectSetting/setShareCode', this.share_code)
    }
    this.options = options
    this.getDetailsInfo()
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
    progressStyle() {
      let style = {}
      style.width = this.percent + '%'
      return style
    },
    // 判断当前砍价的课程是不是自己
    isBargainUserid() {
      return this.bargainData.sponsor_user_id == this.userInfo.id ? true : false
    },
    percent() {
      /**
       * 计算进度条长度
       * (已砍价金额/砍价总金金额) * 100
       * */
      let num = Math.floor(
        (this.bargainData.bargained_total_price / this.bargainData.bargain_price) * 100
      )
      return num > 100 ? 100 : num < 0 ? 0 : num
    },
  },
  filters: {
    filname(val) {
      if (val.length > 9) {
        return val.substring(0, 8) + '...'
      } else {
        return val
      }
    },
  },
  options: { styleIsolation: 'shared' },
  methods: {
    getDetailsInfo() {
      this.$edu.api
        .getPromotionBargainDetail({
          promotion_id: this.options.id,
        })
        .then((res) => {
          this.bargainData = res.data
        })
    },
    // 倒计时结束
    changeStatus() {
      this.promo_type = true
    },
    // 帮好友砍价
    handleBargainDoit() {
      this.$edu.api
        .postPromotionBargainDoit({
          promotion_id: this.bargainData.id,
          sponsor_user_id: this.bargainData.sponsor_user_id,
        })
        .then((res) => {
          this.getDetailsInfo()
          this.$u.toast(res.msg)
        })
    },
    // 邀请砍价
    inviteBargain() {
      this.$edu.judgeLogin(() => {
        this.$u.route('/pageCourse/course/share', {
          type: 12,
          id: this.bargainData.product_id,
          promotion: this.bargainData.id,
        })
      })
    },
    // 支付
    toPay() {
      this.$u.route('/pageCourse/cart/course', {
        id: this.bargainData.product_id,
        promotion_id: this.bargainData.id,
      })
    },
    returnDetail() {
      this.$store.commit('projectSetting/setShareCode', '')
      uni.redirectTo({
        url: '../details?id=' + this.bargainData.product_id,
      })
    },
    // 返回
    back() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({
          type: 'redirectTo',
          url: 'pageCourse/course/details',
          params: {
            id: this.bargainData.product_id,
          },
        })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.bargain-wrap {
  padding: 90rpx 30rpx 60rpx;
  position: relative;
  background-image: url('@/pageCourse/static/images/activity_details_bg.png');
  background-size: 750rpx 200rpx;
  background-repeat: no-repeat;
  .course {
    display: flex;
    padding: 28rpx 16rpx;
    border-radius: 8rpx;
    background-color: #ffffff;
    .content {
      flex: 1;
      margin-left: 16rpx;
      .title {
        font-size: 28rpx;
        font-weight: 400;
        line-height: 36rpx;
        height: 72rpx;
        color: $edu-main-color;
      }
      .price {
        display: flex;
        margin-top: 60rpx;
        .selling {
          font-size: 26rpx;
          font-weight: 500;
          color: $edu-price-color;
        }
        .original {
          font-size: 24rpx;
          font-weight: 400;
          color: #b7bac1;
          text-decoration: line-through;
          margin-left: 8rpx;
        }
      }
    }
  }
  .bargain-view {
    margin-top: 24rpx;
    padding: 56rpx 32rpx;
    background: #ffffff;
    border-radius: 8px;
    .promotion-wrap {
      display: flex;
      align-items: center;
      flex-direction: column;
      .text {
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
        margin-bottom: 30rpx;
        text {
          color: #ff8a52;
        }
      }
      .number {
        display: flex;
        align-items: center;
        /deep/.count-down-days {
          margin-right: 14rpx;
          .u-countdown-item,
          .u-countdown-colon {
            padding: 0;
          }
        }
        /deep/.count-down {
          .u-countdown-item:nth-child(1),
          .u-countdown-colon:nth-child(2) {
            display: none;
          }
        }
      }
    }
    .ongoing {
      margin-top: 70rpx;
      .progress {
        height: 28rpx;
        background-color: #ffece3;
        border-radius: 14rpx;
        border: 1px solid #ffdbca;
        overflow: hidden;
        position: relative;
        .active {
          width: 0;
          height: 100%;
          background: linear-gradient(270deg, #ffb764 0%, #ff8a52 100%);
          border-radius: 12rpx;
        }
      }
      .progress-img {
        position: absolute;
        left: 0;
        top: -15rpx;
      }
      .price {
        margin-top: 20rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #ff8a52;
        text-align: center;
      }
    }
    .invite-btn {
      font-size: 32rpx;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      width: 400rpx;
      height: 75rpx;
      line-height: 75rpx;
      background: #ff8a52;
      border-radius: 39rpx;
      margin: 50rpx auto 0;
    }
    .ranking {
      background-color: #fff9f7;
      padding: 38rpx 30rpx;
      margin-top: 56rpx;
      .title {
        margin: 0 auto;
        width: 212rpx;
      }
      .list {
        .item {
          margin-top: 40rpx;
          display: flex;
          align-items: center;
          .center {
            margin-left: 24rpx;
            flex: 1;
          }
          .name {
            max-width: 300rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: $edu-main-color;
          }
          .time {
            margin-top: 10rpx;
            font-size: 22rpx;
            font-weight: 400;
            color: $edu-tips-color;
          }
          .price {
            font-size: 30rpx;
            font-weight: 400;
            color: #ff8a52;
          }
        }
      }
    }
  }
}
</style>
